<template>
  <div class="container">
    <div class="right">
      <div class="form1">
        <label>学号/手机号</label>
        <input type="text" id="stunum">
        <svg t="1635049121395" class="icon" id="num_yes" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1892" width="18" height="18"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m-114.176-310.954667a53.333333 53.333333 0 0 0 75.434667 0l323.328-323.328a53.333333 53.333333 0 1 0-75.434667-75.434666l-287.914667 283.306666-128.853333-128.853333a53.333333 53.333333 0 1 0-75.434667 75.434667l168.874667 168.874666z" fill="#1afa29" p-id="1893"></path></svg>
        <svg t="1635049219418" class="icon" id="num_fail" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2729" width="20" height="20"><path d="M827.392 195.584q65.536 65.536 97.792 147.456t32.256 167.936-32.256 167.936-97.792 147.456-147.456 98.304-167.936 32.768-168.448-32.768-147.968-98.304-98.304-147.456-32.768-167.936 32.768-167.936 98.304-147.456 147.968-97.792 168.448-32.256 167.936 32.256 147.456 97.792zM720.896 715.776q21.504-21.504 18.944-49.152t-24.064-49.152l-107.52-107.52 107.52-107.52q21.504-21.504 24.064-49.152t-18.944-49.152-51.712-21.504-51.712 21.504l-107.52 106.496-104.448-104.448q-21.504-20.48-49.152-23.04t-49.152 17.92q-21.504 21.504-21.504 52.224t21.504 52.224l104.448 104.448-104.448 104.448q-21.504 21.504-21.504 51.712t21.504 51.712 49.152 18.944 49.152-24.064l104.448-104.448 107.52 107.52q21.504 21.504 51.712 21.504t51.712-21.504z" p-id="2730" fill="#d81e06"></path></svg>
        <label>密码</label>
        <input type="password" id="stupwd">
        <span class="change_success">修改成功!重新输入登录吧!</span>
        <span class="register_success">注册成功!重新输入登录吧!</span>
        <svg t="1635049121395" class="icon" id="pwd_yes" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1892" width="18" height="18"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m-114.176-310.954667a53.333333 53.333333 0 0 0 75.434667 0l323.328-323.328a53.333333 53.333333 0 1 0-75.434667-75.434666l-287.914667 283.306666-128.853333-128.853333a53.333333 53.333333 0 1 0-75.434667 75.434667l168.874667 168.874666z" fill="#1afa29" p-id="1893"></path></svg>
        <svg t="1635049219418" class="icon" id="pwd_fail" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2729" width="20" height="20"><path d="M827.392 195.584q65.536 65.536 97.792 147.456t32.256 167.936-32.256 167.936-97.792 147.456-147.456 98.304-167.936 32.768-168.448-32.768-147.968-98.304-98.304-147.456-32.768-167.936 32.768-167.936 98.304-147.456 147.968-97.792 168.448-32.256 167.936 32.256 147.456 97.792zM720.896 715.776q21.504-21.504 18.944-49.152t-24.064-49.152l-107.52-107.52 107.52-107.52q21.504-21.504 24.064-49.152t-18.944-49.152-51.712-21.504-51.712 21.504l-107.52 106.496-104.448-104.448q-21.504-20.48-49.152-23.04t-49.152 17.92q-21.504 21.504-21.504 52.224t21.504 52.224l104.448 104.448-104.448 104.448q-21.504 21.504-21.504 51.712t21.504 51.712 49.152 18.944 49.152-24.064l104.448-104.448 107.52 107.52q21.504 21.504 51.712 21.504t51.712-21.504z" p-id="2730" fill="#d81e06"></path></svg>
        <svg t="1634975970461" class="icon" id="eye_close" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2379" width="17" height="17"><path d="M93.866667 322.773333a8.533333 8.533333 0 0 1 6.613333 3.114667c5.589333 6.848 10.261333 12.373333 14.058667 16.64 97.664 109.056 239.552 177.706667 397.482666 177.706667 162.752 0 308.48-72.917333 406.314667-187.84 1.493333-1.792 3.242667-3.882667 5.184-6.272a8.533333 8.533333 0 0 1 15.146667 5.376v9.813333l0.021333 8.32v51.754667a8.533333 8.533333 0 0 1-2.517333 6.037333 599.893333 599.893333 0 0 1-99.584 81.002667l82.474666 98.261333a8.533333 8.533333 0 0 1-1.066666 12.010667l-35.946667 30.165333a8.533333 8.533333 0 0 1-12.010667-1.045333l-89.813333-107.050667a593.045333 593.045333 0 0 1-145.450667 50.837333l44.074667 121.024a8.533333 8.533333 0 0 1-5.098667 10.944l-44.096 16.042667a8.533333 8.533333 0 0 1-10.944-5.098667l-48.448-133.098666a604.586667 604.586667 0 0 1-130.88-1.557334L390.4 714.517333a8.533333 8.533333 0 0 1-10.944 5.12l-44.096-16.064a8.533333 8.533333 0 0 1-5.12-10.944l45.184-124.096a593.066667 593.066667 0 0 1-131.584-47.744l-89.813333 107.029334a8.533333 8.533333 0 0 1-12.032 1.066666L106.026667 598.677333a8.533333 8.533333 0 0 1-1.066667-12.010666l82.474667-98.261334a599.872 599.872 0 0 1-80.981334-62.976c-4.352-4.032-10.56-10.026667-18.602666-18.005333A8.533333 8.533333 0 0 1 85.333333 401.386667v-70.101334c0-4.693333 3.84-8.533333 8.533334-8.533333z" fill="#333333" p-id="2380"></path></svg>
        <svg id="eye_open" xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
        <button type="submit" id="submit1" class="btn">登录</button>
        <span class="forgetPwd">忘记密码？</span>
        <span class="register">没有账户?注册!</span>
      </div>
      <div class="form2">
        <label>邮箱</label>
        <input type="text" id="mailInput">
        <span class="emailNotBind">邮箱账号尚未绑定！</span>
        <b id="send_success">60秒后重发</b>
        <svg t="1635004933301" class="icon"  id="mailBtn" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7219" width="25" height="25"><path d="M539.3 284.9H170c-41.4 0-77.3 23.7-94.7 58.4l374.6 166.5 128.8-60c-25.9-39.1-41.1-86-41.1-136.5 0.1-9.6 0.6-19.1 1.7-28.4z" fill="#474A59" p-id="7220"></path><path d="M617.6 495.3l-167.7 82.3L64 398.1V709c0 58.5 47.5 106 106 106h556.5c58.5 0 106-47.5 106-106V555.8c-15.4 3-31.4 4.6-47.7 4.6-64.4 0.1-123.1-24.6-167.2-65.1zM948.9 268.2c-10.3-4.2-123.7-56.4-129.8-58.8-7.5-3-20 8.9-12.5 19.3 1.5 2.2 16.1 27.3 29.1 58.5-28.5 9.2-52.1 20.8-75.5 38.4-23.6 17.7-46.8 41.8-76.1 73-13.7 11.9-15.2 31.6-4 43 11.2 11.5 29.8 11.6 42.1 0.9 32.2-27.9 51.7-54.1 74.8-71 17.2-12.6 35.2-21.5 56.8-28.7 7.9 33.9 10 63.7 11.2 67.4 5.2 16.2 15.9 12.6 19.5 6.8 3.6-5.4 36.5-61.5 57.6-97.3 5.9-10.1 10.9-18.6 14.1-23.9 1.7-2.8 2.8-4.8 3.3-5.5-0.1 0 3.8-18.1-10.6-22.1z" fill="#474A59" p-id="7221"></path></svg>
        <label>验证码</label>
        <input type="text" id="mailPwd">
        <b id="mail_fail">验证失败</b>
        <button type="submit" id="submit2" class="btn2">登录</button>
      </div>
      <div class="form3">
        <label>学号/手机号</label>
        <input type="text" id="c_stunum">
        <label>修改密码</label>
        <input type="password" id="c_pwd">
        <label>确认密码</label>
        <input type="password" id="c_pwd2">
        <span class="isNotExist">用户或手机号不存在</span>
        <svg t="1635049219418" class="icon" id="c_pwd2_fail" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2729" width="20" height="20"><path d="M827.392 195.584q65.536 65.536 97.792 147.456t32.256 167.936-32.256 167.936-97.792 147.456-147.456 98.304-167.936 32.768-168.448-32.768-147.968-98.304-98.304-147.456-32.768-167.936 32.768-167.936 98.304-147.456 147.968-97.792 168.448-32.256 167.936 32.256 147.456 97.792zM720.896 715.776q21.504-21.504 18.944-49.152t-24.064-49.152l-107.52-107.52 107.52-107.52q21.504-21.504 24.064-49.152t-18.944-49.152-51.712-21.504-51.712 21.504l-107.52 106.496-104.448-104.448q-21.504-20.48-49.152-23.04t-49.152 17.92q-21.504 21.504-21.504 52.224t21.504 52.224l104.448 104.448-104.448 104.448q-21.504 21.504-21.504 51.712t21.504 51.712 49.152 18.944 49.152-24.064l104.448-104.448 107.52 107.52q21.504 21.504 51.712 21.504t51.712-21.504z" p-id="2730" fill="#d81e06"></path></svg>
        <button type="submit" id="submit3">完成</button>
      </div>
      <div class="form4">
        <label>学号</label>
        <input type="text" id="r_stunum">
        <label>手机号</label>
        <input type="text" id="r_phone">
        <label>密码</label>
        <input type="password" id="r_pwd">
        <span class="isExist">用户或手机号已存在</span>
        <button type="submit" id="submit4">注册</button>
      </div>
      <div class="form5">
        <label>手机号码</label>
        <input type="text" id="phoneNum">
        <span class="phoneNotBind">手机号尚未绑定！</span>
        <b id="send_success2">发送成功</b>
        <svg t="1635301488496" class="icon" id="phoneBtn" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3370" width="25" height="25"><path d="M512 149.333333c200.298667 0 362.666667 162.368 362.666667 362.666667s-162.368 362.666667-362.666667 362.666667S149.333333 712.298667 149.333333 512 311.701333 149.333333 512 149.333333z m128 234.666667H384v397.909333A297.514667 297.514667 0 0 0 512 810.666667c45.802667 0 89.194667-10.304 128-28.736V384z m-128 320a42.666667 42.666667 0 1 1 0 85.333333 42.666667 42.666667 0 0 1 0-85.333333z m0-490.666667c-164.949333 0-298.666667 133.717333-298.666667 298.666667a298.026667 298.026667 0 0 0 106.645334 228.757333L320 360c0-22.101333 17.92-40 40-40h304c22.101333 0 40 17.92 40 40v380.8A298.026667 298.026667 0 0 0 810.666667 512c0-164.949333-133.717333-298.666667-298.666667-298.666667z m64 213.333334v64h-128v-64h128z" p-id="3371"></path></svg>
        <label>验证码</label>
        <input type="text" id="captcha">
        <b id="mail_fail2">验证失败</b>
        <button type="submit" id="submit5">登录</button>
      </div>
      <div class="svg">
        <div class="svg2">
          <svg   xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
          <span>邮箱登录</span></br></div>
        <div class="svg3">
          <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
          <span>短信登录</span></br></div>
        <div class="svg1">
          <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5.52 19c.64-2.2 1.84-3 3.22-3h6.52c1.38 0 2.58.8 3.22 3"/><circle cx="12" cy="10" r="3"/><circle cx="12" cy="12" r="10"/></svg>
          <span>学号/手机号登录</span></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "first"
}
</script>

<style scoped>
/*# Empty CSS file for your own CSS*/
.container{
  /*width:1000%;*/
  /*height:1000px;*/
  display:flex;
  background:url("back.jpg");
  background-size: cover;
}
body {
  cursor: pointer;
  padding: 20px 20px 0 20px;
  background-size: cover;
  margin: 0;
}
.page {
  display: flex;
  flex-direction: column;
  height: calc(100% - 40px);
  position: absolute;
  place-content: center;
  width: calc(100% - 40px);
}
@media (max-width: 767px) {
  .page {
    height: auto;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
}
/*.container {*/
/*  display: flex;*/
/*  height: 320px;*/
/*  margin: 0 auto;*/
/*  width: 640px;*/
/*}*/
@media (max-width: 767px) {
  .container {
    flex-direction: column;
    height: 630px;
    width: 320px;
  }
}
.right {
  background: whitesmoke;
  opacity: 0.8;
  box-shadow: 0px 0px 40px 16px rgba(0,0,0,0.22);
  color: #F1F1F2;
  position: relative;
  margin-left: 30%;
  width: 35%;
  margin-top: 10%;
  height: 350px;
}
.right:hover{
  filter: blur(0px);
  opacity: 1.0;
}
@media (max-width: 767px) {
  .right {
    flex-shrink: 0;
    height: 100%;
    width: 100%;
    max-height: 350px;
  }
}

.form1 {
  margin: 40px;
  position: absolute;
  display: block;
}
.form2{
  margin: 40px;
  position: absolute;
  display: none;
}
.form3,.form4{
  margin: 10px 40px 40px 40px;
  position: absolute;
  display: none;
}
.form5{
  margin: 40px;
  position: absolute;
  display: none;
}
label {
  color:  black;
  display: block;
  font-size: 14px;
  height: 16px;
  margin-left: 40px;
  margin-top: 20px;
  margin-bottom: 5px;
}
input{
  background: snow;
  font-family: Arial,Helvetica,隶书,serif;
  font-size: 15px;
  height: 30px;
  margin-left: 40px;
  line-height: 30px;
  outline: none !important;
  border: #c2c2c5 1px solid;
  border-radius:6px;
  color: black;
  text-align:left;
  padding-left: 10px;
}
input:hover{
  border:1px solid  skyblue;

}
input::-moz-focus-inner {
  border: 0;
}
#submit1,#submit2,#submit3,#submit4,#submit5 {
  /*border: #707075 1px solid;*/
  border: 0;
  font-size: 30px;
  line-height: 30px;
  outline: none !important;
  width: 30%;
  background: transparent;
  color: black;
  margin-top:10px;
  margin-left: 30%;
  transition: color 300ms;
}
#submit1:focus,#submit2:focus,#submit3:focus,#submit4:focus,#submit5:focus{
  color: #f2f2f2;
}
#submit1:active,#submit2:active,#submit3:active,#submit4:active,#submit5:active {
  color: #d0d0d2;
}
#submit1:hover,#submit2:hover,#submit3:hover,#submit4:hover,#submit5:hover{
  color: #6e952c;

}
#eye_close{
  position: absolute;
  display: block;
  top: 65%;
  left: 70%;
}
#eye_open{
  position: absolute;
  display: none;
  top: 65%;
  left: 70%;
}
#mailBtn{
  position: absolute;
  top: 23%;
  left: 68%;
}
#phoneBtn{
  position: absolute;
  top: 24%;
  left: 68%;
}
.svg{
  margin-top: 240px;
  margin-left: 15px;
  border-radius:10px;
  /*border: 2px black solid;*/
  width:135px;
  height: 90px;
}
.svg span{
  position: absolute;
  margin-top: 1px;
  margin-left: 4px;
  font-size: 10px;
  color: gray;
}
.svg1{
  width: 110px;
  margin-top: 3px;
  margin-left: 10px;
}
.svg2{
  width: 70px;
  margin-top: 6px;
  margin-left: 10px;
}
.svg3{
  width: 70px;
  margin-top: 7px;
  margin-left: 10px;
}
.svg1:hover,.svg2:hover,.svg3:hover,#eye_close:hover,#eye_open:hover,#mailBtn:hover,#phoneBtn:hover{
  background: #e4eeef;
}
#send_success,#send_success2{
  position: absolute;
  top: 25%;
  left: 82%;
  font-size: 13px;
  color: #6e952c;
  display: none;
}
#mail_fail,#mail_fail2{
  position: absolute;
  top: 63%;
  left: 80%;
  font-size: 14px;
  color: red;
  display: none;
}
#num_yes,#num_fail {
  position: absolute;
  display: none;
  top: 24%;
  left: 80%;
}
#pwd_yes,#pwd_fail{
  position: absolute;
  display: none;
  top: 64%;
  left: 80%;
}
.register{
  position: absolute;
  font-size: 15px;
  color: gray;
  top: 135%;
  left: 60%;
}
.register:hover{
  color: #6e952c;
}
.forgetPwd{
  position: absolute;
  font-size: 15px;
  color: gray;
  top: 125%;
  left: 70%;
}
.forgetPwd:hover{
  color: red;
}
.isExist,.isNotExist{
  position: absolute;
  display: none;
  font-size: 12px;
  color: red;
  top: 30%;
  left: 25%;
}
.register_success,.change_success{
  position: absolute;
  display: none;
  font-size: 12px;
  color: #6e952c;
  top: 40%;
  left: 25%;
}
.emailNotBind,.phoneNotBind{
  position: absolute;
  display: none;
  font-size: 12px;
  color: red;
  top: 40%;
  left: 25%;
}
#c_pwd2_fail{
  position: absolute;
  display: none;
  top: 74%;
  left: 80%;
}
</style>